<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.key" placeholder="请输入搜索内容" clearable />
          <el-select v-model="searchModel.score" :key="searchModel.course_id" filterable placeholder="批改" clearable>
            <el-option v-for=" item  in  mode_list " :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- <el-input v-model="searchModel.phone" placeholder="试卷名" clearable /> -->
          <el-button type="primary" @click="getHistoryList" round icon="el-icon-search">查询</el-button>
          <!-- <el-input placeholder="请输入搜索内容" v-model="searchKeyword"> -->
        </el-col>
        <!-- <el-col :span="4" align="right">
          <el-button @click="editUser(null)" type="primary" icon="el-icon-plus" circle></el-button>
        </el-col> -->
      </el-row>
    </el-card>

    <!-- 查询结果栏 -->
    <el-card>
      <el-table :data="examHistoryList" border style="width: 100%">
        <el-table-column label="#" width="50">
          <template slot-scope="scope">
            {{
              (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="id" label="用户ID" width="50">
        </el-table-column> -->
        <el-table-column prop="nickname" label="姓名">
        </el-table-column>
        <el-table-column prop="danwei" label="机房">
        </el-table-column>
        <el-table-column prop="zhiwu" label="职务">
        </el-table-column>
        <el-table-column prop="paper_name" label="试卷名">
        </el-table-column>
        <el-table-column prop="total" label="分数">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.total == 1" type="warning">批改中</el-tag>
            <!-- <el-tag v-else-if="scope.row.total == 3" type="info">考试中</el-tag> -->
            <el-tag v-else-if="scope.row.total >= 90">{{ scope.row.total }}</el-tag>
            <el-tag v-else type="danger">{{ scope.row.total }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="total_show" label="合格情况">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.total_show == 1">合格</el-tag>
            <el-tag v-else-if="scope.row.total == 1" type="warning">批改中</el-tag>
            <!-- <el-tag v-else-if="scope.row.total == 3" type="info">考试中</el-tag> -->
            <el-tag v-else type="danger">不合格</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="next_paper" label="考试次数">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.next_paper == 3">不记入考核</el-tag>
            <el-tag v-else-if="scope.row.next_paper == 0">初试</el-tag>
            <el-tag v-else-if="scope.row.next_paper == 1" type="danger">补考1</el-tag>
            <el-tag v-else-if="scope.row.next_paper == 2" type="danger">补考2</el-tag>
            <el-tag v-else>初试</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="formatted_time" label="考试时间"> </el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <template v-if="isSuper === 1">
              <el-button @click="inspectForm(scope.row.id)" icon="el-icon-search" circle size="mini"></el-button>
              <el-button @click="editForm(scope.row.id)" type="primary" icon="el-icon-edit" circle
                size="mini"></el-button>
              <el-button @click="open(scope.row)" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
            </template>
            <template v-else>
              <el-tag v-if="scope.row.total == 1" type="warning">批改中</el-tag>
              <el-button v-else @click="inspectForm(scope.row.id)" icon="el-icon-search" circle size="mini"></el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo" :page-sizes="[5, 10, 50, 100]" :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 查看考试详情弹出框 -->
    <el-dialog :visible.sync="inspectFormVisible" :fullscreen="true">
      <template v-slot:title>
        <div style="text-align: center; position: fixed; width: 100%; padding: 0px; top: 0;">
          <h1>{{ examForm.title }}</h1>
          <p>考生姓名:{{ nickName }}</p>
          <span v-if="examForm.total_score === 1">总分：批改中</span>
          <span v-else>总分: {{ examForm.total_score }}</span>
          <!-- <p>考试倒计时: {{ minutes }} 分 {{ seconds }} 秒</p> -->
        </div>
      </template>
      <el-form :model="examForm" style="margin-top: 80px;">
        <h2 v-if="examForm.other_paper_list.length > 0">选择。(共{{ examForm.other_paper_list.length }}题)</h2>
        <div v-for="(option, index) in examForm.other_paper_list">
          <!-- 单选 -->
          <div v-if="option.questionType == 'xz'">
            <h3>{{ index + 1 }}.({{ option.question_type_ch }})({{ option.score }}分){{ option.content }}
              <!-- 根据正确或错误添加图标 -->
              <span v-if="isCorrectAnswer(option)" class="correct-answer"></span>
              <span v-if="isWrongAnswer(option)" class="wrong-answer"></span>
              <template v-if="edit === false">
                <span class="correctAnswer">本题得分：{{ option.user_score }}分</span>
              </template>
              <template v-else>
                <!-- 添加选择分数的下拉框 -->
                <label>选择分数：</label>
                <el-select v-model="option.user_score" filterable placeholder="请选择" size="mini"
                  :style="{ width: '90px' }">
                  <el-option v-for="scoreOption in scoreXzOptions" :key="scoreOption.value" :label="scoreOption.label"
                    :value="scoreOption.value">
                  </el-option>
                </el-select>
              </template>
            </h3>
            <el-radio-group v-model="option.examinee_answer">
              <el-radio label="A">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option" @click.stop.prevent>{{ option.choice_a }}</p>
                </div>
              </el-radio><br>
              <el-radio label="B">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_b }}</p>
                </div>
              </el-radio><br>
              <el-radio label="C">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_c }}</p>
                </div>
              </el-radio><br>
              <el-radio label="D">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_d }}</p>
                </div>
              </el-radio>
            </el-radio-group>
            <p class="correctAnswer">正确答案：{{ option.answer }}</p>
          </div>
          <!-- 多选 -->
          <div v-else-if="option.questionType == 'mxz'">
            <h3>{{ index + 1 }}.({{ option.question_type_ch }})({{ option.score }}分){{ option.content }}
              <!-- 根据正确或错误添加图标 -->
              <span v-if="isCorrectMultiAnswer(option)" class="correct-answer"></span>
              <span v-if="isWrongMultiAnswer(option)" class="wrong-answer"></span>
              <template v-if="edit === false">
                <span class="correctAnswer">本题得分：{{ option.user_score }}分</span>
              </template>
              <template v-else>
                <!-- 添加选择分数的下拉框 -->
                <label>选择分数：</label>
                <el-select v-model="option.user_score" filterable placeholder="请选择" size="mini"
                  :style="{ width: '90px' }">
                  <el-option v-for="scoreOption in scoreXzOptions" :key="scoreOption.value" :label="scoreOption.label"
                    :value="scoreOption.value">
                  </el-option>
                </el-select>
              </template>
            </h3>
            <el-checkbox-group v-model="option.examinee_answers">
              <el-checkbox label="A">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_a }}</p>
                </div>
              </el-checkbox><br>
              <el-checkbox label="B">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_b }}</p>
                </div>
              </el-checkbox><br>
              <el-checkbox label="C">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_c }}</p>
                </div>
              </el-checkbox><br>
              <el-checkbox label="D">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_d }}</p>
                </div>
              </el-checkbox>
            </el-checkbox-group>
            <p class="correctAnswer">正确答案：{{ option.answer }}</p>
          </div>
        </div>

        <!-- 判断 -->
        <div class="no-copy-paste">
          <h2 v-if="examForm.pd_paper_list.length > 0">判断。(共{{ examForm.pd_paper_list.length }}题)</h2>
          <div v-for="(option, index) in examForm.pd_paper_list">
            <!-- 判断 -->
            <div v-if="option.questionType == 'pd'">
              <h3>{{ index + 1 }}.({{ option.question_type_ch }})({{ option.score }}分){{ option.content }}
                <!-- 根据正确或错误添加图标 -->
                <span v-if="isCorrectAnswer(option)" class="correct-answer"></span>
                <span v-if="isWrongAnswer(option)" class="wrong-answer"></span>
                <template v-if="edit === false">
                  <span class="correctAnswer">本题得分：{{ option.user_score }}分</span>
                </template>
                <template v-else>
                  <!-- 添加选择分数的下拉框 -->
                  <label>选择分数：</label>
                  <el-select v-model="option.user_score" filterable placeholder="请选择" size="mini"
                    :style="{ width: '90px' }">
                    <el-option v-for="scoreOption in scoreXzOptions" :key="scoreOption.value" :label="scoreOption.label"
                      :value="scoreOption.value">
                    </el-option>
                  </el-select>
                </template>
              </h3>
              <el-radio-group v-model="option.examinee_answer">
                <el-radio label="对">
                  <div class="option-wrapper" @click.stop.prevent>
                    <p class="option">对</p>
                  </div>
                </el-radio><br>
                <el-radio label="错">
                  <div class="option-wrapper" @click.stop.prevent>
                    <p class="option">错</p>
                  </div>
                </el-radio>
              </el-radio-group>
              <p class="correctAnswer">正确答案：{{ option.answer }}</p>
            </div>
          </div>
        </div>


        <div class="no-copy-paste">
          <h2 v-if="examForm.tk_paper_list.length > 0">填空。(共{{ examForm.tk_paper_list.length }}题)</h2>
          <div v-for="(question_now, index) in examForm.tk_paper_list" :key="index" id="box1">
            <h3 style="display: inline-block; vertical-align: middle">
              {{ index + 1 }}.({{ "填空" }})({{ question_now.score }}分)
              <!-- <input v-model="question_now.id" type="hidden">
            <input v-model="question_now.tk_num" type="hidden"> -->
              <template v-for="(question, qIndex) in question_now.blanks">
                <template v-if="question.type === 'text'">
                  {{ question.value }}
                </template>
                <template v-else-if="question.type === 'input'">
                  <span :id="`${question_now.id}_${qIndex}`" v-if="isStaff === 0" @copy="preventCopyPaste"
                    @paste="preventCopyPaste"
                    style="width: 200px; height: 24px; line-height: 24px; font-size: 20px; padding: 1px 14px; border-bottom: 1px solid black; color: blue"
                    contenteditable="true" @click="onInputClick($event)"
                    @input="handleSpanInput(question_now.id, qIndex, $event)">{{ question.value }}
                  </span>
                  <span :id="`${question_now.id}_${qIndex}`" v-else class="read-only-input"
                    style="width: 200px; height: 24px; line-height: 24px; font-size: 20px; padding: 1px 14px; border-bottom: 1px solid black; color: blue"
                    contenteditable="true" @input="handleSpanInput(question_now.id, qIndex, $event)">{{ question.value }}
                  </span>
                </template>
              </template>
              <template v-if="edit === true">
                <span class="pending-correction"></span>
                <!-- 添加选择分数的下拉框 -->
                <label>选择分数：</label>
                <el-select v-model="question_now.user_score" filterable placeholder="请选择" size="mini"
                  :style="{ width: '90px' }">
                  <el-option v-for="scoreOption in scoreTkOptions" :key="scoreOption.value" :label="scoreOption.label"
                    :value="scoreOption.value">
                  </el-option>
                </el-select>
              </template>
              <template v-else-if="edit === false">
                <span v-if="question_now.user_score == 0" class="wrong-answer"></span>
                <span v-else-if="question_now.user_score == 5" class="correct-answer"></span>
                <span v-else-if="question_now.user_score == -1" class="pending-correction"></span>
                <span v-else class="half-correct-answer"></span>
                <span v-if="question_now.user_score == -1" class="correctAnswer">本题得分：批改中</span>
                <span v-else class="correctAnswer">本题得分：{{ question_now.user_score }}分</span>
              </template>
            </h3>
            <!-- <span v-if="isWrongMultiAnswer(option)" class="wrong-answer"></span> -->
            <p class="correctAnswer">正确答案：{{ question_now.answer }}</p>
            <hr>
          </div>
        </div>
        <div class="no-copy-paste">
          <h2 v-if="examForm.jd_paper_list.length > 0">简答。(共{{ examForm.jd_paper_list.length }}题)</h2>
          <div v-for="(jd, jdIndex) in examForm.jd_paper_list" :key="jdIndex">
            <h3>{{ jdIndex + 1 }}.({{ "简答" }})({{ jd.score }}分){{ jd.content }}
              <template v-if="edit === true">
                <span class="pending-correction"></span>
                <!-- 添加选择分数的下拉框 -->
                <label>选择分数：</label>
                <el-select v-model="jd.user_score" filterable placeholder="请选择" size="mini" :style="{ width: '90px' }">
                  <el-option v-for="scoreOption in scoreJdOptions" :key="scoreOption.value" :label="scoreOption.label"
                    :value="scoreOption.value">
                  </el-option>
                </el-select>
              </template>
              <template v-else-if="edit === false">
                <span v-if="jd.user_score == 0" class="wrong-answer"></span>
                <span v-else-if="jd.user_score == 20" class="correct-answer"></span>
                <span v-else-if="jd.user_score == -1" class="pending-correction"></span>
                <span v-else class="half-correct-answer"></span>
                <span v-if="jd.user_score == -1" class="correctAnswer">本题得分：批改中</span>
                <span v-else class="correctAnswer">本题得分：{{ jd.user_score }}分</span>
              </template>
            </h3>
            <div style="display: flex; align-items: flex-start;">
              <!-- 显示考生答案 -->
              <div style="margin-right: 20px;">
                <h2 style="color: blue; margin-bottom: 5px;">考生答案:</h2>
                <textarea v-model="jd.jd_examinee_answer" rows="30" cols="100" v-if="isStaff === 0"
                  @copy="preventCopyPaste" @paste="preventCopyPaste" style="color: blue"></textarea>
                <textarea v-model="jd.jd_examinee_answer" v-else class="read-only-input" rows="30" cols="100"
                  style="color: blue;"></textarea>
              </div>
              <!-- 显示正确答案 -->
              <div>
                <h2 style="color: red; margin-bottom: 5px;">正确答案:</h2>
                <textarea v-model="jd.answer" class="read-only-input" @copy="preventCopyPaste" @paste="preventCopyPaste"
                  rows="30" cols="100" style="color: red;"></textarea>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="position: fixed; bottom: 10px; width: 100%;">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <div style="text-align: center;">
          <el-button v-if="edit === false" type="primary" @click="inspectFormVisible = false" style="width: 150px;">返
            回</el-button>
          <el-button v-else type="primary" @click="submitCorrection" style="width: 150px;">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 批改试卷弹出框 -->
  </div>
</template>

<script>
import testApi from '@/api/testMange';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      searchKeyword: '',
      formLabelWidth: "130px",
      editFormVisible: false,
      inspectFormVisible: false,
      fly_exam_id: 3,
      edit: false,
      title: "",
      nickName: "",
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 5,
      },
      examForm: {
        title: "",
        countdown: 100 * 60,
        score_id: 0,
        total_score: 0,
        other_paper_list: [],
        pd_paper_list: [],
        tk_paper_list: [],
        jd_paper_list: [],
      },
      examHistoryList: [],
      scoreJdOptions: Array.from({ length: 21 }, (_, index) => ({
        value: 20 - index,
        label: `${20 - index}分`,
      })),
      scoreTkOptions: Array.from({ length: 6 }, (_, index) => ({
        value: 5 - index,
        label: `${5 - index}分`,
      })),
      scoreXzOptions: [
        { value: 5, label: '5分' },
        { value: 0, label: '0分' },
      ],
      mode_list: [
        {
          value: '1',
          label: '批改中'
        },
      ],
    };
  },
  methods: {
    isCorrectAnswer(option) {
      return option.answer === option.examinee_answer;
    },
    isWrongAnswer(option) {
      return option.answer !== option.examinee_answer;
    },
    isCorrectMultiAnswer(option) {
      const correctAnswers = option.answers || [];
      return correctAnswers.every(answer => option.examinee_answers.includes(answer)) &&
        correctAnswers.length === option.examinee_answers.length;
    },
    isWrongMultiAnswer(option) {
      return !this.isCorrectMultiAnswer(option);
    },
    submitCorrection() {
      testApi.submitCorrection(this.examForm).then((response) => {
        //关闭弹窗
        this.inspectFormVisible = false;
        // 提示提交成功
        this.$message({
          message: response.message,
          type: "success",
        });
        this.getHistoryList();
      });
    },
    inspectForm(id) {
      // console.log('Submit button clicked!');
      testApi.getExamineeAnswerById(id).then((response) => {
        this.nickName = response.data.nick_name;
        this.examForm = response.data;
      });
      this.edit = false;
      this.inspectFormVisible = true;
    },
    editForm(id) {
      // console.log('Submit button clicked!');
      testApi.getExamineeAnswerById(id).then((response) => {
        this.nickName = response.data.nick_name;
        this.examForm = response.data;
        this.setDefaultScores();
      });
      this.edit = true;
      this.inspectFormVisible = true;
    },
    setDefaultScores() {
      // 在每个题目中检查并设置默认分数
      // this.examForm.options.forEach((option) => {
      //   if (this.edit && (option.user_score === 0 || option.user_score === undefined)) {
      //     this.$set(option, 'user_score', '5'); // 默认为0分
      //   }
      // });

      this.examForm.tk_paper_list.forEach((question_now) => {
        if (this.edit && (question_now.user_score === -1 || question_now.user_score === undefined)) {
          this.$set(question_now, 'user_score', 5); // 默认为0分
        }
      });

      this.examForm.jd_paper_list.forEach((jd) => {
        if (this.edit && (jd.user_score === -1 || jd.user_score === undefined)) {
          this.$set(jd, 'user_score', 20); // 默认为0分
        }
      });
    },
    preventCopyPaste(event) {
      // 阻止复制和粘贴事件
      event.preventDefault();
      this.$message.warning('禁止复制和粘贴操作');
    },
    handleSpanInput(id, qIndex, event) {
      const inputValue = event.target.innerText;
      // 将输入值传递到后端或在需要的地方进行处理
      // 在这里你可以更新相应的数据结构或进行其他操作
      // console.log(`ID: ${id}, Question Index: ${qIndex}, Input Value: ${inputValue}`);
      // 找到对应的 tks 对象和输入框
      // const tk = this.examForm.tks.find(tk => tk.id === id);
      // if (tk) {
      //   const input = tk.blanks.find((blank, index) => index === qIndex && blank.type === 'input');
      //   if (input) {
      //     input.value = inputValue;
      //   }
      //   // 更新 tks 对象，确保 Vue 响应式更新
      //   this.$set(this.examForm.tks, this.examForm.tks.indexOf(tk), { ...tk });
      // }
      console.log(`ID: ${id}, Question Index: ${qIndex}, Input Value: ${inputValue}`);

    },
    open(paper) {
      this.$confirm(`您是否确认删除试卷名为：《${paper.paper_name}》的考试记录么？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          testApi.deleteExamById(paper.id).then((response) => {
            this.$message({
              type: "success",
              message: response.message,
            });
            this.getHistoryList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getHistoryList();
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getHistoryList();
    },
    getHistoryList() {
      testApi.getExamHistoryList(this.searchModel).then((response) => {
        this.total = response.data.total;
        this.examHistoryList = response.data.exam_history;
      });
    },
  },
  created() {
    this.getHistoryList();
  },
  computed: {
    ...mapGetters([
      // 'name',
      'isSuper',
      'isStaff',
      // 'nick_name'
    ]),
    // tableData() {
    //   const search = this.searchKeyword;
    //   if (search) {
    //     // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
    //     // 注意： filter() 不会对空数组进行检测。
    //     // 注意： filter() 不会改变原始数组。
    //     return this.examHistoryList.filter(data => {
    //       // some() 方法用于检测数组中的元素是否满足指定条件;
    //       // some() 方法会依次执行数组的每个元素：
    //       // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
    //       // 如果没有满足条件的元素，则返回false。
    //       // 注意： some() 不会对空数组进行检测。
    //       // 注意： some() 不会改变原始数组。
    //       return Object.keys(data).some(key => {
    //         //Object.keys()---如果处理对象，将返回一个可进行枚举的属性数组，注意，是返回一个数组，是通过属性名组成的数组
    //         //Object.keys()---参数：要返回其枚举自身属性的对象；  返回值：一个表示给定对象的所有可枚举属性的字符串数组
    //         // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
    //         // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
    //         return String(data[key]).toLowerCase().indexOf(search) > -1
    //       })
    //     })
    //   }
    //   return this.examHistoryList
    // },
    // paginatedData() {
    //   let start = (this.searchModel.pageNo - 1) * this.searchModel.pageSize
    //   let end = start + this.searchModel.pageSize
    //   this.total = this.tableData.length
    //   return this.tableData.slice(start, end)
    // },
  }
};
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

/* 选择分数框属性 */
.wider-select {
  width: 50px;
  /* 根据需要调整宽度 */
  text-align: center;
  /* 让文本居中 */
}

.el-dialog .el-input {
  width: 88%;
}

/* 禁止用户选择文本 */
body {
  user-select: none;
}

.no-copy-paste {
  user-select: none;
}

/* 禁用鼠标事件 */
/* .read-only-input {
  pointer-events: none;
} */

.centered-text {
  text-align: center;
  /* display: block; */
}

.center {
  display: inline-block;
  text-align: left;
}

.left-span {
  /* text-align: left; */
  display: block;
}

.option {
  white-space: pre-wrap;
  max-width: 1400px;
}


.option-wrapper {
  display: inline-block;
  vertical-align: top;
  margin-top: -15px;
}

.correct-answer::before {
  /* 用于标识答案正确的样式，添加勾的图标 */
  content: '\2713';
  /* Unicode 编码，代表勾 */
  color: green;
  /* 设置图标颜色为绿色 */
  font-size: 30px;
  /* 设置图标大小 */
  margin-right: 5px;
  /* 可根据需要调整右边距 */
}

.wrong-answer::before {
  /* 用于标识答案错误的样式，添加叉的图标 */
  content: '\2717';
  /* Unicode 编码，代表叉 */
  color: red;
  /* 设置图标颜色为红色 */
  font-size: 30px;
  /* 设置图标大小 */
  margin-right: 5px;
  /* 可根据需要调整右边距 */
}

.half-correct-answer::before {
  /* 使用 Unicode 符号表示半对状态 */
  content: '\2B50';
  color: orange;
  /* 设置颜色为橙色 */
  font-size: 30px;
  margin-right: 5px;
}

.pending-correction::before {
  /* 使用 Unicode 符号表示待批改状态 */
  content: '\270E';
  /* 手写字母 E 符号，可以表示编辑或批改 */
  color: purple;
  /* 设置颜色为紫色 */
  font-size: 30px;
  margin-right: 5px;
}



.correctAnswer {
  color: red;
}
</style>